import React, { useEffect } from "react";
import { Modal, Form, Input, Select, Button, DatePicker } from "antd";
import moment from "moment";
import { ConsoleSqlOutlined } from "@ant-design/icons";

interface ListApplicationsValues {
  // 仓库物品ID, 必填 @int32
  warehouse_product_id?: number;
  // 申请人id，必填 @int32
  administrator_id?: number;
  // 申请类型：1-借出 2-归还 @int32
  application_type?: number;
  // 预计归还日期， 日期格式 2024-03-04，必填
  expected_return_date?: string;
  // 备注
  remarks?: string;
}

interface ListApplicationsModalProps {
  title: string;
  visible: boolean;
  onCancel: () => void;
  onOk: (values: ListApplicationsValues) => void;
  defaultValue: ListApplicationsValues;
  warehouseProductList?: any[];
  users: any[];
}

const { Option } = Select;

const ListApplicationsModal: React.FC<ListApplicationsModalProps> = ({
  title,
  visible,
  onCancel,
  onOk,
  defaultValue,
  warehouseProductList = [],
  users = [],
}) => {
  console.log("defaultValue", defaultValue);
  const [form] = Form.useForm<any>();
  // TODO
  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      onOk(values);
      form.resetFields();
    } catch (errorInfo) {
      console.log("Failed:", errorInfo);
    }
  };

  useEffect(() => {
    if (Object.keys(defaultValue).length === 0) {
      form.resetFields();
    } else {
      // 将日期字符串转换为moment对象
      const expected_return_date = defaultValue.expected_return_date
        ? moment(defaultValue.expected_return_date, "YYYY-MM-DD")
        : null;

      form.setFieldsValue({
        ...defaultValue,
        expected_return_date: expected_return_date,
      });
    }
  }, [defaultValue, visible]);

  return (
    <Modal
      title={title}
      visible={visible}
      onOk={handleOk}
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button key="ok" type="primary" onClick={handleOk}>
          确定
        </Button>,
      ]}
    >
      <Form form={form} initialValues={{ ...defaultValue }}>
        <>
          {!Object.keys(defaultValue)?.length && (
            <>
              <Form.Item
                label="选择仓库物品"
                name="warehouse_product_id"
                rules={[
                  {
                    required: !Object.keys(defaultValue).length,
                    message: "请选择",
                  },
                ]}
              >
                <Select placeholder="请选择">
                  {warehouseProductList.map((ele) => (
                    <Option key={ele.id} value={ele.id}>
                      {ele.warehouse_name}-{ele.product_name}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
           
         

              <Form.Item
                label="物资管理员"
                name="administrator_id"
                rules={[
                  {
                    required: true,
                    message: "请选择申请人",
                  },
                ]}
              >
                {/* Add a Select component for selecting suppliers */}
                <Select placeholder="请选择申请人">
                  {/* Map through the 'users' array to display supplier options */}
                  {users.map((user) => (
                    <Option key={user.id} value={user.id}>
                      {user.username}
                    </Option>
                  ))}
                </Select>
              </Form.Item>

              <Form.Item
                label="预计归还日期"
                name="expected_return_date"
                rules={[
                  {
                    required: true,
                    message: "请输入",
                  },
                ]}
                validateTrigger="onBlur"
              >
                <DatePicker placeholder="请选择" />
              </Form.Item>

              <Form.Item
                label="备注"
                name="remarks"
                rules={[
                  {
                    required: true,
                    message: "请输入",
                  },
                ]}
                validateTrigger="onBlur"
              >
                <Input placeholder="请输入" />
              </Form.Item>
              <Form.Item
                label="数量"
                name="quantity"
                rules={[
                  {
                    required: true,
                    message: "请输入",
                  },
                ]}
                validateTrigger="onBlur"
              >
                <Input type="number" placeholder="请输入" />
              </Form.Item>
            </>
          )}
        </>

        <Form.Item
          label="申请类型"
          name="application_type"
          rules={[
            {
              required: true,
              message: "请选择申请类型",
            },
          ]}
        >
          <Select placeholder="请选择申请类型">
            <Option value={1}>借出</Option>
            <Option value={2}>归还</Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ListApplicationsModal;
